<!--
 * @Author: GKN
 * @Date: 2023-08-21 09:21:29
 * @LastEditTime: 2024-01-16 10:13:25
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\ie\card1.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="height: 336px;" class="border-r6 po-re">
                    <imgView :src="list.length>0?list[0].thumb:''" @click="goInfo(list[0])" />
                    <div class="po-ab0 xf-font" style="width: 100%;text-align: left;">
                        {{ list.length>0?list[0].name:'' }}
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="MarT cursor-p" @click="goInfo(list[1])">
                    <div class="font-title font-text-al-l">{{ list.length>2?list[1].name:'' }}</div>
                    <div class="font-content font-MTop12 font-text-al-l omit-3">{{ list.length>2?list[1].blurb:'' }}</div>
                </div>
                <div class="MarT cursor-p" @click="goInfo(list[2])">
                    <div class="font-title font-text-al-l">{{ list.length>3?list[2].name:'' }}</div>
                    <div class="font-content font-MTop12 font-text-al-l omit-3">{{ list.length>3?list[2].blurb:'' }}</div>
                </div>
                <div class="MarT cursor-p" @click="goInfo(list[3])">
                    <div class="font-title font-text-al-l">{{ list.length>4?list[3].name:'' }}</div>
                    <div class="font-content font-MTop12 font-text-al-l omit-3">{{ list.length>4?list[3].blurb:'' }}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="MarT35">
            <el-col :span="8" @click="goInfo(list.length>4?list[4]:'')" style="margin-bottom:20px;">
                <div >
                    <div style="height: 224px;" class="border-r6 shadow-1">
                        <imgView :src="list.length>4?list[4].thumb:''" />
                    </div>
                    <div class="font-title font-text-al-l omit-2 MarT">{{ list.length>4?list[4].name:'' }}</div>
                </div>
            </el-col>
            <el-col :span="8" @click="goInfo(list.length>5?list[5]:'')" style="margin-bottom:20px;">
                <div >
                    <div style="height: 224px;" class="border-r6 shadow-1">
                        <imgView :src="list.length>5?list[5].thumb:''" />
                    </div>
                    <div class="font-title font-text-al-l omit-2 MarT">{{ list.length>5?list[5].name:'' }}</div>
                </div>
            </el-col>
            <el-col :span="8" @click="goInfo(list.length>6?list[6]:'')" style="margin-bottom:20px;">
                <div >
                    <div style="height: 224px;" class="border-r6 shadow-1">
                        <imgView :src="list.length>6?list[6].thumb:''" />
                    </div>
                    <div class="font-title font-text-al-l omit-2 MarT">{{ list.length>6?list[6].name:'' }}</div>
                </div>
            </el-col>
        </el-row>
    </div>
    
</template>
  
<script setup>
    import CryptoJS from 'crypto-js';
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import { useRoute, useRouter } from "vue-router";
    const Router = useRouter();
    const props = defineProps({
        list:{
            type: Object,
            default: [],
        },
        title:{
          type: String,
          default: '',
        }
    })
    const goInfo=(item)=>{
        if(!item){
            return;
        }
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:props.title,
                    id:item.newsId,
                    path:'/animatedly/list',
                    first_title:'创新企业',
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
</script>
  
  <style lang='less' scoped>
  .el-col-lg-4-8 {
          width: 20%;
      }
      .ad1-view{
          div{
              margin-right: 20px;
          }
      }
      .bjview{
          width: 20px;
          height: 20px;
          border-radius: 50%;
          color: #fff;
          font-size: 8px;
          line-height: 20px;
          background: #d10b00;
          text-align: center;
      }
  </style>
  
  